import React,{useState,useEffect} from 'react'
import './index.less'
const EffectPage = () => {
  const [initState,setInitState] = useState(false)
  const [phone,setPhone] = useState(0)
  const changePhone = ()=>{
    setPhone(Math.random()*10)
  }
  useEffect(()=>{
    console.log(initState,'你有东西改变，我就执行')
  })
  useEffect(()=>{
    // 一般这里可以进行接口的请求，或者初始化
    console.log('你有东西改变，我也就执行第一次；我相当于vue的created生命周期的效果')
  },[])
  
  useEffect(()=>{
    // 这里我们用来进行 watch类的监听修改
    console.log('我监听了phone的改变，只有phone改变我才执行:',phone)
  },[phone])
  // 监听某个事件的函数
  const monitor = ()=>{
    console.log("我监听了滚动")
  }
  useEffect(()=>{
    monitor()
    return ()=>{
      // 这里进行取消监听的操作，后续需要实验一下
    }
  },[])
  return (
    <div className='effect_page'>
      <h1>effect的四种状态解析</h1>
      <div className="box">
        改变组件中的某个状态
        <button onClick={()=> setInitState(!initState)}>改变initState</button>
      </div>
      <div className="box">
        组件中某个状态被监听
        <button onClick={changePhone}>改变了phone的值</button>
      </div>
    </div>
  )
}

export default EffectPage